<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body">
				<view :class="['page', data.__page_classes]">
            <view class="body after-navber">
                <view class="head">
                    <image class="head-img" :src="data.__wxapp_img.integral.head.url"></image>
                    <view class="w-100" style="position:relative;margin-bottom:36upx;">
                        <view class="flex-row flex-x-center integral">
                            <view class="flex-grow-0">我的积分</view>
                            <view class="flex-grow-0">
                                <image @tap="shuoming" :src="data.__wxapp_img.dapp.shuoming.url" style="width:30upx;height:30upx;margin-left:20upx;"></image>
                            </view>
                        </view>
												<view class="flex-row flex-x-center my-integral">{{data.integral?data.integral:0}}</view>
												<view class="sfb-integral" v-if="data.isBindSft">十方币:{{data.sfbNum}}</view>
                    </view>
                    <view class="flex-row my-exchange">
                        <view @tap="exchange" class="flex-grow-1 flex-x-center">
                            <view class="flex-row">
                                <view class="flex-grow-0">
                                    <image :src="data.__wxapp_img.dapp.my_exchange.url"></image>
                                </view>
                                <view class="flex-grow-1">我的兑换</view>
                            </view>
                        </view>
                        <view @tap="detail" class="flex-grow-1 flex-x-center">
                            <view class="flex-row">
                                <view class="flex-grow-0">
                                    <image :src="data.__wxapp_img.integral.detail.url"></image>
                                </view>
                                <view class="flex-grow-1">积分明细</view>
                            </view>
                        </view>
												<view @tap="show_mask()" class="flex-grow-1 flex-x-center" v-if="data.isBindSft">
												    <view class="flex-row">
												        <view class="flex-grow-0">
												            <image src="https://mall.shifangyp.com/uploads/image/dapp_1/ca32e10669c431c1bf51972fc1791b79e3683adc.png"></image>
												        </view>
												        <view class="flex-grow-1">币分互换</view>
												    </view>
												</view>
                    </view>
                    <view class="flex-row flex-x-center" style="position:relative">
                        <image @tap="register" :src="data.__wxapp_img.register.is_register.url" style="width:376upx;height:96upx;margin-bottom:-48upx;" v-if="data.register_day==1"></image>
                        <image @tap="register" :src="data.__wxapp_img.register.register.url" style="width:376upx;height:96upx;margin-bottom:-48upx;" v-else></image>
                    </view>
                </view>
                <view class="rotation-chart" style="width:100%;" v-if="data.banner_list.length>0">
                    <swiper autoplay="true" circular="true" class="swiper" duration="1000" indicatorDots="true" interval="5000">
                        <swiper-item v-for="(item,index) in data.banner_list" :key="item.id">
                            <navigator :appId="item.appId" :path="item.path" target="miniProgram" :url="item.page_url" v-if="item.open_type=='wxapp'">
                                <image class="slide-image" mode="aspectFill" :src="item.pic_url"></image>
                            </navigator>
                            <navigator @tap="navigatorClick" :data-open_type="item.open_type" :data-url="item.page_url" :openType="item.open_type?item.open_type:'navigator'" :url="item.page_url" v-else>
                                <image class="slide-image" mode="aspectFill" :src="item.pic_url"></image>
                            </navigator>
                        </swiper-item>
                    </swiper>
                </view>
                <block v-if="data.coupon_list.length>0">
                    <view class="exchange-coupon">
                        <view class="coupon-head">兑换优惠券</view>
                        <view style="margin-left:24upx;">
                            <scroll-view class="scroll-view-x" scrollWithAnimation="true" scrollX="true">
                                <view class="flex-row coupon_list">
                                    <view @tap="couponInfo" class="flex-row flex-grow-0 scroll-view-item" :data-id="item.id" style="z-index:3" v-for="(item,index) in data.coupon_list" :key="item.id">
                                        <view class="flex-grow-1" style="z-index:1">
                                            <view>
                                                <view class="flex-row flex-x-center flex-y-center" style="height:80upx;">
                                                    <view style="margin-right:6upx;">￥</view>
                                                    <view style="font-size:15pt;line-height:0.8">{{item.sub_price}}</view>
                                                </view>
                                                <view class="flex-x-center flex-y-center" style="height:50upx;font-size:7pt">满{{item.min_price}}元可用</view>
                                            </view>
                                        </view>
                                        <block v-if="item.type==0">
                                            <image :src="data.__wxapp_img.coupon.index.url" style="height:100%;width:100%;position:absolute;z-index:0;left:0;top:0"></image>
                                            <view class="flex-grow-0 flex-x-center flex-y-center duihuan" style="z-index:1">立即兑换</view>
                                        </block>
                                        <block v-else>
                                            <image :src="data.__wxapp_img.coupon.no.url" style="height:100%;width:100%;position:absolute;z-index:0;left:0;top:0"></image>
                                            <view class="flex-grow-0 flex-x-center flex-y-center duihuan" style="z-index:1">已兑换</view>
                                        </block>
                                    </view>
                                </view>
                            </scroll-view>
                        </view>
                    </view>
                    <view style="height:24upx;background:#F7F7F7;"></view>
                </block>
                <view>
                    <block v-if="data.goods_list.length>0">
                        <view class="coupon-head">优惠购专区</view>
                        <view style="height:120upx;border-top:1upx solid #e2e2e2;border-bottom:1upx solid #e2e2e2;">
                            <scroll-view class="scroll-view-x" scrollWithAnimation="true" scrollX="true">
                                <view class="flex-row">
                                    <view @tap="catGoods" class="scroll-view flex-grow-0" data-cat-id="0" :data-index="-1" :id="data.cat_checked?'cat_name_active':''">
                                        <image class="item-image" :src="data.__wxapp_img.integral.all.url"></image>
                                        <view>全部</view>
                                    </view>
                                    <view @tap="catGoods" class="scroll-view flex-grow-0" :data-cat-id="item.id" :data-index="index" :id="item.cat_checked?'cat_name_active':''" v-for="(item,index) in data.catList" :key="item.id">
                                        <image class="item-image" :src="item.pic_url"></image>
                                        <view>{{item.name}}</view>
                                    </view>
                                </view>
                            </scroll-view>
                        </view>
                        <view class="flex-row" style="flex-wrap:wrap;justify-content:space-between;background-color:#f7f7f7;margin-left:-10upx;">
                            <view @tap="goodsInfo" class="goods" :data-goods-id="item.id" v-for="(item,index) in data.goods_list" :key="item.id">
                                <image class="goods-img" :src="item.cover_pic"></image>
                                <view class="goods-name text-more-2">{{item.name}}</view>
                                <view class="goods-price">{{item.integral}}积分
                                        <block v-if="item.price>0">+￥{{item.price}}</block>
                                </view>
                                <view class="goods-font">
                                    <view style="float:left;text-decoration:line-through; ">￥{{item.original_price}}</view>
                                    <view style="float:right;">仅剩{{item.goods_num}}{{item.unit}}</view>
                                </view>
                                <view class="goods-buy" :data-index="index">立即兑换</view>
                            </view>
                        </view>
                    </block>
                </view>
                <view @tap="hideModal" catchtouchmove="preventTouchMove" id="modal-mask" v-if="data.showModel"></view>
                <view class="ci_shibai" v-if="data.showModel">
                    <view @tap="hideModal" class="ci_close">
                        <image :src="data.__wxapp_img.integral.close.url" style="width:100%;height:100%;"></image>
                    </view>
                    <block v-if="data.status==1">
                        <view class="ci_shibai_pic">
                            <image :src="data.__wxapp_img.integral.shibai.url" style="width:100%;height:100%;"></image>
                        </view>
                        <view class="ci_shibai_font">
                            <view style="font-size:23px;font-weight: bolder;margin-bottom:10upx;">兑换失败!</view>
                            <view style="font-size:15px;">{{data.content}}</view>
                        </view>
                    </block>
                    <block v-if="data.status==4">
                        <view class="ci_success_pic">
                            <image :src="data.__wxapp_img.integral.success.url" style="width:100%;height:100%;"></image>
                        </view>
                        <view class="ci_success_font">{{data.content}}</view>
                        <view class="ci_success_btn">
                            <navigator style="display:inline" url="/pages/coupon/coupon">
                                <view class="success_btn" style="float:left;color:#353535;border: 1upx #999999 solid;">去卡券包</view>
                            </navigator>
                            <navigator style="display:inline" url="/pages/index/index">
                                <view class="success_btn" style="float:right;color:#ffffff;background:#ff4544;">立即使用</view>
                            </navigator>
                        </view>
                    </block>
                </view>
            </view>
        </view>
				
				<view class="modalDlg" v-if="data.showExchange"  catchtouchmove="true">
					<view class='close_mask' @tap="close_mask">
						<image class='close-pic' src='/images/pond-details.png' @tap="close_mask"></image>
					</view>
					<view style='color:#FF6C64;font-size:20px;'>币分互换</view>
					<radio-group class="radio-group" @change="radioChange">
						<label class="radio" v-for="(item,index) in data.trade_type" :key="index">
							<radio color="#FF6C64" :value="item.name" :data-id="item.name" :checked="item.checked" @change="item.name" /> {{item.value}}
						</label>
					</radio-group>
					<view class="flex-row-modal">
						<label>输入兑换个数：</label>
						<input class='recharge_amount' id='2' type='text' placeholder='' maxlength="8" @input='sfbinput'></input>
					</view>

					<view class="flex-row-modal">
						<view class='totrade' @tap='exchangeSfb()'>点击兑换</view>
					</view>

					<view class='rate-note'>兑换比例：{{data.sfrate}}个积分兑换一个十方币</view>

				</view>
				<view class="mask" catchtouchmove="preventTouchMove" v-if="data.showExchange"></view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = 0, e = -1, a = 1;
	export default {
		data() {
			return {
				data: {
        goods_list: [],
				banner_list: [],
				coupon_list: [],
				isBindSft: false,
				coinType: 2,
				coinNum: 1,
				sfbNum: 0,
				showExchange: false,
				sfrate: 0,
				trade_type: [{
						name: '2',
						value: '兑换成十方币',
						checked: 'true'
					},
					{
						name: '1',
						value: '兑换成商城积分'
					},
				]
    },
			};
		},
		onLoad: function(e) {myVue = this;
        myVue.getApp.page.onLoad(this, e), a = 1, this.getGoodsList(t);
    },
    onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(a) {
        myVue.getApp.page.onShow(this);
        var n = this;
        this.getIntegral(),this.getSfb()
    },
		onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onShareAppMessage: function() {
        myVue.getApp.page.onShareAppMessage(this);
        var t = myVue.getApp.getUser(), e = "", a = myVue.getApp.core.getStorageSync(myVue.getApp.const.WX_BAR_TITLE);
        for (var n in a) if ("integral-mall/index/index" === a[n].url) {
            e = a[n].title;
            break;
        }
        return {
            path: "/pages/integral-mall/index/index?user_id=" + t.id,
            title: e || "积分商城"
        };
    },
    onReachBottom: function(e) {
        myVue.getApp.page.onReachBottom(this), this.getGoodsList(t);
    },
		methods: {
			getIntegral: function(){
				myVue.getApp.request({
				    url: myVue.getApp.api.integral.index,
				    data: {},
				    success: function(a) {
				        if (0 == a.code && (a.data.today && myVue.setData({
				            register_day: 1
				        }), myVue.setData({
				            banner_list: a.data.banner_list,
				            coupon_list: a.data.coupon_list,
				            integral: a.data.user.integral,
				            catList: a.data.cat_list
				        }), -1 != e)) {
				            var o = [];
				            o.index = e, o.catId = t, n.catGoods({
				                currentTarget: {
				                    dataset: o
				                }
				            });
				        }
				    },
				    complete: function(t) {
				        myVue.getApp.core.hideLoading();
				    }
				})
			},
			show_mask: function(){
				this.setData({
					showExchange: true
				})
			},
			close_mask: function() {
				this.setData({
					showExchange: false
				})
			},
			// 兑换数量
			sfbinput: function(e) {
				this.setData({
					coinNum: e.detail.value
				})
			},
			// 兑换类型
			radioChange: function(e) {
				this.setData({
					coinType: e.detail.value
				})
			},
			getSfb: function(){
				myVue.getApp.request({
					url: myVue.getApp.api.new.sft_query_sfb,
					data: {
						// #ifdef H5
						platform: '2',
						// #endif
						// #ifndef H5
						platform: '1',
						// #endif
					},
					success: function(e){
						if(e.code==0){
							myVue.setData({
								isBindSft: true,
								sfrate: e.data.rate,
								sfbNum: e.data.coin
							})
						}else if(e.code==1){
							myVue.setData({isBindSft: false})
						}
					}
				})
			},
			exchangeSfb: function(){
				var that = this;
				myVue.getApp.request({
					url: myVue.getApp.api.new.sft_exchange_sfb,
					data: {
						// #ifdef H5
						platform: '2',
						// #endif
						// #ifndef H5
						platform: '1',
						// #endif
						trade_num: that.data.coinNum,
						trade_type: that.data.coinType,
					},
					success: function(e){
						if(e.code==0){
							myVue.getApp.core.showToast({
								title: '兑换成功',
								icon: 'none',
								mask: false,
								duration: 1500
							}),that.close_mask(),that.getIntegral(),that.getSfb();
						}else{
							that.close_mask(),myVue.getApp.core.showToast({
								title: e.msg,
								icon: 'none',
								mask: false,
								duration: 1500
							});
						}
					}
				})
			},
			exchangeCoupon: function(t) {
        var e = this, a = e.data.coupon_list, n = t.currentTarget.dataset.index, o = a[n], i = e.data.integral;
        if (parseInt(o.integral) > parseInt(i)) e.setData({
            showModel: !0,
            content: "当前积分不足",
            status: 1
        }); else {
            if (parseFloat(o.price) > 0) s = "需要" + o.integral + "积分+￥" + parseFloat(o.price); else var s = "需要" + o.integral + "积分";
            if (parseInt(o.total_num) <= 0) return void e.setData({
                showModel: !0,
                content: "已领完,来晚一步",
                status: 1
            });
            if (parseInt(o.num) >= parseInt(o.user_num)) return o.type = 1, void e.setData({
                showModel: !0,
                content: "兑换次数已达上限",
                status: 1,
                coupon_list: a
            });
            myVue.getApp.core.showModal({
                title: "确认兑换",
                content: s,
                success: function(t) {
                    t.confirm && (parseFloat(o.price) > 0 ? (myVue.getApp.core.showLoading({
                        title: "提交中"
                    }), myVue.getApp.request({
                        url: myVue.getApp.integral.exchange_coupon,
                        data: {
                            id: o.id,
                            type: 2
                        },
                        success: function(t) {
                            0 == t.code && myVue.getApp.core.requestPayment({
                                _res: t,
                                timeStamp: t.data.timeStamp,
                                nonceStr: t.data.nonceStr,
                                package: t.data.package,
                                signType: t.data.signType,
                                paySign: t.data.paySign,
                                complete: function(n) {
                                    "requestPayment:fail" != n.errMsg && "requestPayment:fail cancel" != n.errMsg ? "requestPayment:ok" == n.errMsg && (o.num = parseInt(o.num), 
                                    o.num += 1, o.total_num = parseInt(o.total_num), o.total_num -= 1, i = parseInt(i), 
                                    i -= parseInt(o.integral), e.setData({
                                        showModel: !0,
                                        status: 4,
                                        content: t.msg,
                                        coupon_list: a,
                                        integral: i
                                    })) : e.getApp.core.showModal({
                                        title: "提示",
                                        content: "订单尚未支付",
                                        showCancel: !1,
                                        confirmText: "确认"
                                    });
                                }
                            });
                        },
                        complete: function() {
                            e.getApp.core.hideLoading();
                        }
                    })) : (myVue.getApp.core.showLoading({
                        title: "提交中"
                    }), myVue.getApp.request({
                        url: myVue.getApp.api.integral.exchange_coupon,
                        data: {
                            id: o.id,
                            type: 1
                        },
                        success: function(t) {
                            0 == t.code && (o.num = parseInt(o.num), o.num += 1, o.total_num = parseInt(o.total_num), 
                            o.total_num -= 1, i = parseInt(i), i -= parseInt(o.integral), e.setData({
                                showModel: !0,
                                status: 4,
                                content: t.msg,
                                coupon_list: a,
                                integral: i
                            }));
                        },
                        complete: function() {
                            e.getApp.core.hideLoading();
                        }
                    })));
                }
            });
        }
    },
    hideModal: function() {
        this.setData({
            showModel: !1
        });
    },
    couponInfo: function(t) {
        var e = t.currentTarget.dataset;
        myVue.getApp.core.navigateTo({
            url: "/pages/integral-mall/coupon-info/index?coupon_id=" + e.id
        });
    },
    goodsAll: function() {
        var t = this, e = t.data.goods_list, a = [];
        for (var n in e) {
            var o = e[n].goods;
            e[n].cat_checked = !1;
            for (var i in o) a.push(o[i]);
        }
        t.setData({
            index_goods: a,
            cat_checked: !0,
            goods_list: e
        });
    },
    catGoods: function(n) {
        var o = n.currentTarget.dataset, i = this, s = i.data.catList;
        t = o.catId, e = o.index;
        var r = o.index;
        if (-1 === r) {
            var p = !0;
            for (var c in s) s[c].cat_checked = !1;
        }
        if (r >= 0) for (var c in s) s[c].id == s[r].id ? (s[c].cat_checked = !0, p = !1) : s[c].cat_checked = !1;
        i.setData({
            cat_checked: p,
            catList: s,
            goods_list: []
        }), a = 1, i.getGoodsList(t);
    },
    getGoodsList: function(t) {
        var n = this;
        -1 === e && n.setData({
            cat_checked: !0
        }), myVue.getApp.core.showLoading({
            title: "加载中"
        }), myVue.getApp.request({
            url: myVue.getApp.api.integral.goods_list,
            data: {
                page: a,
                cat_id: t
            },
            success: function(t) {
                if (0 === t.code) {
                    var e = n.data.goods_list;
                    t.data.list.length > 0 && (e.length > 0 && (e = e.concat(t.data.list)), 0 === e.length && (e = t.data.list), 
                    a += 1), 0 === t.data.list.length && n.getApp.core.showToast({
                        title: "没有更多啦",
                        icon: "none"
                    }), n.setData({
                        goods_list: e
                    });
                }
            },
            complete: function() {
                n.getApp.core.hideLoading();
            }
        });
    },
    goodsInfo: function(t) {
        var e = t.currentTarget.dataset.goodsId, a = this;
        myVue.getApp.core.navigateTo({
            url: "/pages/integral-mall/goods-info/index?goods_id=" + e + "&integral=" + a.data.integral
        });
    },
		shuoming: function() {
        myVue.getApp.core.navigateTo({
            url: "/pages/integral-mall/shuoming/index"
        });
    },
    detail: function() {
        myVue.getApp.core.navigateTo({
            url: "/pages/integral-mall/detail/index"
        });
    },
    exchange: function() {
        myVue.getApp.core.navigateTo({
            url: "/pages/integral-mall/exchange/index"
        });
    },
    register: function() {
        myVue.getApp.core.navigateTo({
            url: "/pages/integral-mall/register/index"
        });
    }
		},
	}
</script>

<style scoped>
page {
    background: #fff;
}

.head {
    position: relative;
    z-index: 10;
    margin-bottom: 48upx;
}

.head-img {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 0;
}

.shuoming {
    position: absolute;
    width: 30upx;
    height: 30upx;
    left: 60%;
    top: 50upx;
}

.shuoming image {
    width: 30upx;
    height: 30upx;
}

.integral {
    color: #999;
    font-size: 9pt;
    padding: 28upx 0upx 20upx 0upx;
}

.my-integral {
    color: #ecb786;
    font-size: 18pt;
    line-height: 1;
    position: relative;
}

.my-exchange {
    color: #fff;
    margin-bottom: 20upx;
    line-height: 1;
    position: relative;
}

.my-exchange image {
    width: 34upx;
    height: 34upx;
    margin-right: 16upx;
}

.rotation-chart {
    height: 100%;
    width: 100%;
    background: #f7f7f7;
}

.swiper {
    height: 190upx;
    margin: 56upx 0upx 20upx 0upx;
    width: 100%;
}

.slide-image {
    height: 190upx;
    width: 100%;
}

.exchange-coupon {
    margin-bottom: 40upx;
}

.coupon-head {
    color: #353535;
    margin: 30upx 0upx 38upx 20upx;
    padding-left: 16upx;
    border-left: 4upx solid #ff6f28;
}

.scroll-view-item {
    width: 256upx;
    height: 130upx;
    margin-right: 16upx;
    position: relative;
    color: #fff;
}

.duihuan {
    width: 56upx;
    font-size: 7pt;
    padding: 10upx 16upx;
    line-height: 1.2;
}

.scroll-view {
    display: inline-block;
    height: 80upx;
    margin: 20upx 0upx;
    width: 138upx;
}

#cat_name_active view {
    color: #ff6f28;
}

.item-image {
    width: 46upx;
    height: 46upx;
    margin-left: 46upx;
}

.original-cost {
    margin: 32upx 0 0 24upx;
    color: #353535;
    font-weight: bolder;
    line-height: 1;
}

.full-price {
    margin: 18upx 0 38upx 24upx;
    color: #353535;
    font-size: 11px;
}

.exchange {
    color: #353535;
    font-size: 9pt;
    border: 2upx solid #353535;
    border-radius: 24upx;
    height: 48upx;
    padding: 0 32upx;
}

.scroll-view view {
    position: static;
    display: flex;
    justify-content: center;
    color: #353535;
    font-size: 10px;
}

.goods {
    width: 375upx;
    background-color: #fff;
    margin-top: 10upx;
}

.goods-img {
    width: 100%;
    height: 370upx;
}

.goods-name {
    margin: 20upx 0;
    padding: 0 24upx;
    color: #353535;
    font-size: 9pt;
    line-height: 1.4;
    height: 2.8em;
}

.goods-price {
    color: #ff6f28;
    font-size: 12px;
    margin: 0upx 0upx 8upx 24upx;
}

.goods-font {
    color: #999;
    font-size: 11px;
    margin: 0upx 24upx;
    height: 20upx;
}

.goods-buy {
    margin: 24upx 24upx;
    height: 48upx;
    background: #e19a59;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24upx;
    color: #fff;
    font-size: 15px;
    background-image: linear-gradient(120deg,#f1b37d,#e19a59);
}

.register {
    width: 300upx;
    height: 76upx;
    left: 30%;
    top: 85%;
    position: absolute;
    z-index: 1;
}

.ci_shibai {
    width: 580upx;
    height: 310upx;
    border-radius: 16upx;
    background: #fff;
    overflow: hidden;
    position: fixed;
    top: calc(35% + var(--window-top));
    left: 85upx;
    z-index: 9999;
}

.ci_shibai_pic {
    width: 124upx;
    height: 134upx;
    margin: 88upx 48upx 88upx 96upx;
    float: left;
}

.ci_success_pic {
    width: 580upx;
    height: 310upx;
    position: fixed;
    top: calc(20% + var(--window-top));
}

.ci_shibai_font {
    margin-top: 104upx;
    float: left;
    color: #353535;
}

.ci_success_font {
    display: flex;
    justify-content: center;
    margin: 160upx 0 20upx 0;
    color: #353535;
    font-size: 16px;
}

.ci_success_btn {
    margin: 0 40upx;
}

.success_btn {
    width: 228upx;
    height: 64upx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30upx;
}

.ci_close {
    width: 50upx;
    height: 50upx;
    position: absolute;
    right: 16upx;
    top: 16upx;
    z-index: 9999;
}

#modal-mask {
    width: 100vh;
    height: 100vh;
    position: fixed;
    top: var(--window-top);
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
    z-index: 7777;
    color: #fff;
}
.sfb-integral{
	position: absolute;
	right: 52upx;
	top: 28upx;
	font-size: 20upx;
	color: #FFFFFF;
}
.sfb-btn{
	width: 30upx;
	height: 30upx;
}
/*弹窗 */
 
.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: 9000;
  opacity: 0.7;
}
.flex-row-modal{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
  margin-bottom: 80rpx;
}
 
.modalDlg {
  width: 600rpx;
  height: 750rpx;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 9999;
  margin: -370rpx 75rpx;
  background-color: #fff;
  border-radius: 36rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.recharge_amount {
  color: #353535;
  width: 130rpx;
  height: 70rpx;
  background: #f1f1f1;
  text-align: center;
  border-radius: 12rpx;
  text-indent: 0;
  margin-right: 30rpx;
}
 
.totrade {
  color: #fff;
  width: 400rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #FF6C64;
  text-align: center;
  border-radius: 12rpx;
  font-size: 28rpx;
  text-indent: 0em;
}

.radio-group{
  display: flex;
  flex-direction: column;
  margin-top: 30rpx;
}
.radio{
  margin-bottom: 20rpx;
}

.close_mask {
  color: #000;
  position: relative;
  left: 40%;
  margin-top: 20rpx;
  font-size: 26px;
  padding: 10rpx;
}
.close-pic{
  width: 50rpx;
  height: 50rpx;
}
.rate-note{
  color:#999;
  font-size: 20rpx;
}
 
/*弹窗结束  */
</style>
